<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>员工信息管理系统</title>
		<link rel="stylesheet" type="text/css" href="../css/employeeManager.css"/>
		<script src="../js/jquery-1.8.3.min.js"></script>
		<script>
			function add() {
				// 1.获取员工的信息
				var id = $("#id").val();
				var name = $("#name").val();
				var email = $("#email").val();
				var salary = $("#salary").val();
				// 2.判断员工的信息是否填写完整
				if (id == "" || name == "" || email == "" || salary == "") {
					alert("请完善员工的信息");
					return;
				}
				// 3.判断员工的id是否重复
				// 获取列表中的所有id，遍历并对比，有重复则停止
				var flag = true;
				$("#middle tr td:eq(1)").each(function(){
					if ($(this).text() == id) {
						alert("员工id重复！");
						flag = false;
					}
				})
				
				if (!flag) {
					return;
				} 
				// 4.把员工的信息插入表格
				var checkboxColumn = $("<td><input type='checkbox' /></td>");
				var idColumn = $("<td>" + id + "</td>");
				var nameColumn = $("<td>"+name+"</td>");
				var emailColumn = $("<td>"+email+"</td>");
				var salaryColumn = $("<td>"+salary+"</td>");
				var tr = $("<tr></tr>");
				tr.append(checkboxColumn).append(idColumn).append(nameColumn).append(emailColumn).append(salaryColumn);
				$("#middle table").append(tr);
			}
			
			function selectAll() {
				// 1、获取表格标题单选列的值
				var check = $("#middle #checkAll").prop("checked");
				// 2、遍历表格，修改单选列的值
				$("#middle tr").each(function(){
					$(this).find("td:eq(0) input[type='checkbox']").prop("checked", check);
				})
			}
			
			function deleteEmployee() {
				// 1、获取所有的选中项，然后删除
				$("#middle tr").each(function(){
					var isChecked = $(this).find("td:eq(0)").prop("checked");
					if ($(this).find("td:eq(0) input[type='checkbox']").prop("checked") == true) {
						$(this).remove();
					}
				})
			}
			
			function updateEmployee() {
				// 1、获取值
				var id = $("#bottom input[name='id']").val();
				var name = $("#bottom input[name='name']").val();
				var email = $("#bottom input[name='email']").val();
				var salary = $("#bottom input[name='salary']").val();
				// 2、校验值 -- 不能为空
				if ( id == "" || name == "" || email == "" || salary == "") {
					alert("请完善信息！");
					return;
				}
				// 3、查看列表是否存在id，不存在则提示用户
				var flag = false;
				var updateTr;
				$("#middle tr:gt(0)").each(function(){
					if ($(this).find("td:eq(1)").text() == id) {
						updateTr = $(this);
						flag = true;
					}
				})
				// 4、修改值
				if (flag) {
					updateTr.find("td:eq(2)").text(name);
					updateTr.find("td:eq(3)").text(email);
					updateTr.find("td:eq(4)").text(salary);
				}
			}
		</script>
	</head>
	<body>
		<div id="top">
			<h2>添加新员工</h2>
			<div>
				ID：<input id="id" type="text" name="id" />
				姓名：<input id="name" type="text" name="name" />
				邮箱：<input id="email" type="text" name="email" />
				工资：<input id="salary" type="text" name="salary" />
				<input type="button" value="添加新员工" onclick="add()" />
			</div>
			<hr />
		</div>
		
		<div id="middle">
			<table>
				<tr>
					<th><input type="checkbox" id="checkAll" onclick="selectAll()" /></th>
					<th>ID</th>
					<th>姓名</th>
					<th>邮箱</th>
					<th>工资</th>
				</tr>
			</table>
			<p onclick="deleteEmployee()">删除选中员工</p>
			<hr />
		</div>
		
		<div id="bottom">
			ID：<input type="text" name="id" />
			姓名：<input type="text" name="name" />
			邮箱：<input type="text" name="email" />
			工资：<input type="text" name="salary" />
			<input type="button" value="修改员工信息" onclick="updateEmployee()" />
		</div>
	</body>
</html>
